<template>
    <div class="emsfaultlibrary">
        <HeaderTitle title="故障库" des="设备故障定义" :imgUrl="require('@/static/imgs/repository-reg.png')"> </HeaderTitle>
        <div class="content">
            <el-row :span="24">
                <el-col :xs="5" :sm="5" :md="5" class="emsfaultlibrary__tree">
                    <div class="tree">
                        <avue-tree
                                :option="treeOption"
                                :data="treeData"
                                @node-click="nodeClick"
                        >
            <span class="el-tree-node__label" slot-scope="{ node, data }">
              <el-tooltip
                      class="item"
                      effect="dark"
                      content="无数据权限"
                      placement="right-start"
                      v-if="data.isLock"
              >
                <span>{{ node.label }} <i class="el-icon-lock"></i></span>
              </el-tooltip>
              <span v-if="!data.isLock">{{ node.label }}</span>
            </span>
                        </avue-tree>
                    </div>
                </el-col>
                <el-col :xs="19" :sm="19" :md="19" class="emsfaultlibrary__main">
                    <el-card class="box-card btn-search">
                        <div slot="header" class="clearfix">
                            <div class="btn-box">
                                <el-button type="info" icon="el-icon-refresh-left"></el-button>
                                <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addFun"
                                >新增</el-button
                                >
                                <el-button type="success" icon="el-icon-edit" :disabled="selectionList.length !== 1" @click="handleUpdate(selectionList[0])">编辑</el-button>
                                <el-button type="danger" icon="el-icon-circle-close" :disabled="!selectionList.length" @click="deletes('delMultil')">删除</el-button>
                            </div>
                            <div class="icon-box">
                                <i class="el-icon-refresh" @click="refreshChange"></i>
                                <i class="el-icon-setting" @click="columnShow"></i>
                            </div>
                        </div>
                        <div class="tabelsearch">
                            <el-form :inline="true" class="demo-form-inline">
                                <el-form-item label="故障名称">
                                    <el-input placeholder="请输入故障名称" v-model="searchForm.faultName" clearable></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" icon="el-icon-search" @click="searchChange">查询</el-button>
                                    <el-button icon="el-icon-refresh-right" @click="resetBtn">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                    <div class="kno-table">
                        <avue-crud
                                ref="crud"
                                :option="option"
                                v-model="form"
                                :page.sync="page"
                                :table-loading="listLoading"
                                @selection-change="selectionChange"
                                :before-open="handleOpenBefore"
                                :data="list"
                                @on-load="getList"
                                @search-change="searchChange"
                                @refresh-change="refreshChange"
                                @size-change="sizeChange"
                                @current-change="currentChange"
                                @row-save="create"
                        >
                            <template slot="header">
                                    <IconTitle class="selfTitle" title="故障库列表" imgUrl="yunwei" />
                            </template>
                            <template slot="faultNumber" slot-scope="scope">
                             <span class="faultNumber">
                                  {{ scope.row.faultNumber }}
                             </span>
                            </template>
                            <template slot="faultName" slot-scope="scope">
                                <el-tooltip popper-class="table-toolTip" effect="light" :content="scope.row.faultName">
                                <span class="toolTip-ellipsis">
                                  {{ scope.row.faultName }}
                                </span>
                                </el-tooltip>
                            </template>
                            <template slot="position" slot-scope="scope">
                                <el-tooltip popper-class="table-toolTip" effect="light" :content="scope.row.position">
                                <span class="toolTip-ellipsis">
                                  {{ scope.row.position }}
                                </span>
                                </el-tooltip>
                            </template>
                            <template slot="faultDescription" slot-scope="scope">
                                <el-tooltip popper-class="table-toolTip" effect="light" :content="scope.row.faultDescription">
                                    <span class="toolTip-ellipsis">{{ scope.row.faultDescription }}</span>
                                </el-tooltip>
                            </template>
                            <template slot="faultPhenomenon" slot-scope="scope">
                                <el-tooltip popper-class="table-toolTip" effect="light" :content="scope.row.faultPhenomenon">
                                <span class="toolTip-ellipsis">
                                  {{ scope.row.faultPhenomenon }}
                                </span>
                                </el-tooltip>
                            </template>
                            <template slot="faultCause" slot-scope="scope">
                                <el-tooltip popper-class="table-toolTip" effect="light" :content="scope.row.faultCause">
                                <span class="toolTip-ellipsis">
                                  {{ scope.row.faultCause }}
                                </span>
                                </el-tooltip>
                            </template>
                            <template slot="solution" slot-scope="scope">
                                <el-tooltip popper-class="table-toolTip" effect="light" :content="scope.row.solution">
                                    <span class="toolTip-ellipsis">{{ scope.row.solution }}</span>
                                </el-tooltip>
                            </template>
                            <template slot="prevention" slot-scope="scope">
                                <el-tooltip popper-class="table-toolTip" effect="light" :content="scope.row.prevention">
                                    <span class="toolTip-ellipsis">{{ scope.row.prevention }}</span>
                                </el-tooltip>
                            </template>
                            <template slot="menu" slot-scope="scope">
                                <el-button
                                        v-if="sys_user_del"
                                        type="text"
                                        size="small"
                                        icon="el-icon-delete"
                                        @click="deletes('',scope.row)"
                                >删除
                                </el-button>
                                <el-button
                                        v-if="sys_user_edit"
                                        type="text"
                                        size="small"
                                        icon="el-icon-edit"
                                        @click="handleUpdate(scope.row, scope.index)"
                                >编辑
                                </el-button>
                                <el-button
                                        type="text"
                                        size="small"
                                        icon="el-icon-view"
                                        @click="handleView(scope.row, scope.index)"
                                >查看
                                </el-button>
                            </template>
                        </avue-crud>
                    </div>
                </el-col>
            </el-row>
            <el-dialog
                    class="avue-dialog avue-dialog--top"
                    title="故障库管理"
                    v-if="regulationDialogVisible"
                    :visible.sync="regulationDialogVisible"
                    width="50%">
                <Info v-if="regulationDialogVisible" :regulationTreeData="regulationTreeData" :regulationId="regulationId" :isView="isView" @cancelFun="cancelFun" @sureFun="sureFun"></Info>
            </el-dialog>
        </div>

    </div>
</template>

<script>
    import {fetchList, fetchTree, addObj, putObj, delObj} from "@/api/ems/repository/emsfaultlibrary";
    import { tableOption } from '@/const/crud/ems/repository/emsfaultlibrary'
    import { mapGetters } from "vuex";
    import IconTitle from "@/components/icon-title/index.vue";
    import Info from "./info.vue";
    import HeaderTitle from "../components/header-title/index"
    import jQuery from "jquery";
    export default {
        name: "emsfaultlibrary",
        components: {
            IconTitle,
            Info,
            HeaderTitle
        },
        data() {
            return {
                selectionList: [],
                regulationId: null,
                isView: false,
                regulationDialogVisible: false,
                searchForm: {
                    faultName: null
                },
                treeOption: {
                    nodeKey: "id",
                    addBtn: false,
                    menu: false,
                    defaultExpandAll: true,
                    props: {
                        label: "name",
                        value: "id",
                    },
                },
                regulationTreeData: [],
                treeData: [],
                option: tableOption,
                defaultProps: {
                    label: "name",
                    value: "id",
                },
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20, // 每页显示多少条,
                    isAsc: false, // 是否倒序
                },
                list: [],
                listLoading: true,
                role: [],
                form: {},
            };
        },
        computed: {
            ...mapGetters(["permissions"]),
        },
        watch: {
            role() {
                this.form.role = this.role;
            },
        },
        created() {
            this.sys_user_add = this.permissions["sys_user_add"];
            this.sys_user_edit = this.permissions["sys_user_edit"];
            this.sys_user_del = this.permissions["sys_user_del"];
            this.init();
        },
         mounted() {
    this.initElement();
  },
        methods: {
               initElement() {
      var mediumb = document.createElement("b"); //思路一样引入中间元素
      jQuery(".avue-crud__tip").after(mediumb);
      jQuery(".selfTitle").after(jQuery(".avue-crud__tip"));
      jQuery(mediumb).after(jQuery(".selfTitle"));
      jQuery(mediumb).remove();
    },
            sureFun(data, regulationId){
                if(regulationId){
                    putObj(data)
                        .then(() => {
                            this.getList(this.page);
                            this.regulationDialogVisible = false
                            this.$notify.success("修改成功");
                        })
                        .catch(() => {
                            loading();
                        });
                }
                else{
                    addObj(data)
                        .then(() => {
                            this.getList(this.page);
                            this.regulationDialogVisible = false
                            this.$notify.success("创建成功");
                        })
                        .catch(() => {
                            loading();
                        });
                }
            },
            cancelFun(){
                this.regulationDialogVisible = false
            },
            resetBtn(){
                this.searchForm.faultName = null;
            },
            init() {
                fetchTree({type: "ems_fault_library"}).then((response) => {
                    this.regulationTreeData = response.data.data
                    this.treeData = [{
                        delFlag: "0",
                        id: 1,
                        name: "所有类型",
                        parentId: -1,
                        remark: "",
                        type: "all",
                        weight: "1",
                        children: response.data.data
                    }];
                });
            },
            nodeClick(data) {
                this.page.page = 1;
                this.getList(this.page, { faultCategory: data.id });
            },
            getList(page, params) {
                this.listLoading = true;
                fetchList(
                    Object.assign(
                        {
                            current: page.currentPage,
                            size: page.pageSize,
                            faultCategory: '',
                        },
                        params,
                        this.searchForm
                    )
                ).then((response) => {
                    this.list = response.data.data.records;
                    this.page.total = response.data.data.total;
                    this.listLoading = false;
                });
            },
            searchChange(param, done) {
                this.page.currentPage = 1
                this.getList(this.page, this.searchForm)
            },
            columnShow(){
                this.$refs.crud.$refs.dialogColumn.columnBox=!0
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            currentChange(current) {
                this.page.currentPage = current;
            },
            selectionChange(list) {
                this.selectionList = list;
            },
            refreshChange() {
                this.getList(this.page);
            },
            handleOpenBefore(show, type) {
            },
            addFun() {
                this.isView = false
                this.regulationId = null
                this.regulationDialogVisible = true
            },
            handleUpdate(row, index) {
                this.isView = false
                this.regulationId = row.id
                this.regulationDialogVisible = true
            },
            handleView(row, index) {
                this.isView = true
                this.regulationId = row.id
                this.regulationDialogVisible = true
            },
            create(row, done, loading) {
                addObj(this.form)
                    .then(() => {
                        this.getList(this.page);
                        done();
                        this.$notify.success("创建成功");
                    })
                    .catch(() => {
                        loading();
                    });
            },
            deletes(isMulti,row) {
                let id = ''
                this.$confirm(
                    "此操作将永久删除该条故障数据,是否继续?",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                ).then(() => {
                    if(isMulti =='delMultil'){
                        id = this.selectionList.map(item=>item.id).toString()
                    }else{
                        id = row.id
                    }
                    delObj(id).then(() => {
                        this.getList(this.page);
                        this.$notify.success("删除成功");
                    })
                        .catch(() => {
                            this.$notify.error("删除失败");
                        });
                });
            }
        }
    };
</script>
<style lang="scss">
@import "@/styles/color.scss";

    .emsfaultlibrary {
        height: 100%;
        .content{
             height: 100%;
            .emsfaultlibrary__tree{
                padding-right: 10px;
                 height: 100%;
                .tree{
                  background: #fff;
        height: 100%;
        border-radius:4px;
        padding: 20px;
                }

            }
            .emsfaultlibrary__main{
                 .el-tag--small {
        height: 32px;
      }
      .avue-crud {
        background: #fff;
        border-radius: 5px;
        padding: 20px;
        padding-top: 10px;
        margin-bottom: 10px;
        width: 100%;
      }
                .tabelsearch{
                    .demo-form-inline {
                        padding-top: 20px ;
                    }
                }
                .kno-table{
                    border-radius: 20px;
                    height: 100%;
                    margin-top: 10px;
                }
            }
        }
        &__tree {
            padding-top: 3px;
            padding-right: 20px;
        }

        &__main {
            .el-card__body {
                padding-top: 0;
            }
        }
        .emsfaultlibrary__main{
            .faultNumber{
                color:  $theme;
            }
        }
        .toolTip-ellipsis{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }
    }
</style>

